import { computed, defineComponent, ref, unref } from '@vue/runtime-core';
import { Input, Modal } from 'ant-design-vue';
import { Divider } from 'ant-design-vue';
import { Button } from 'ant-design-vue';
import { getMyIntention, commitMyIntention, intentionRef } from '/@/hooks/usePages';
import { appStore } from '/@/store/modules/app';

export default defineComponent({
  name: 'intention',
  setup() {
    const visible = ref(false);

    const intention = appStore.getIntention;

    const isEdit = ref(unref(getMyIntention).length === 0);
    const isDisable = ref(true);
    const isForm = computed(() => {
      return (!intentionRef.value || isEdit.value) && isDisable.value;
    });
    const intent = computed(() => {
      switch (intention?.intention_status) {
        case 0:
          return intention?.intention;
          break;
        case 1:
          return intention?.short_intention;
          break;
        default:
          return '';
      }
    });

    function getIntent() {
      return unref(intent)?.length ? (
        <>
          <span>{unref(intent)}</span>
          <Divider></Divider>
        </>
      ) : null;
    }
    function getMyintent() {
      function myIntentClick(event: MouseEvent) {
        visible.value = true;
        event.stopPropagation();
      }
      return (
        <>
          <span onClick={myIntentClick}>
            可自由选择及增加的祈祷意向<i class="icon"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          </span>
        </>
      );
    }

    function getModal() {
      const slots = {
        footer: () => {
          const btnText = unref(isForm) ? '确定' : '编辑';
          const btnClick = unref(isForm)
            ? () => {
                // appStore.commitMyIntention(intentionRef.value);
                commitMyIntention(intentionRef.value);
                if (intentionRef.value.length === 0) {
                  isDisable.value = true;
                } else {
                  isEdit.value = false;
                  isDisable.value = false;
                }
                // visible.value = false;
              }
            : () => {
                isEdit.value = true;
                isDisable.value = true;
              };
          return (
            <>
              <Button
                onClick={() => {
                  visible.value = false;
                }}
              >
                关闭
              </Button>
              <Button onClick={btnClick}>{btnText}</Button>
            </>
          );
        },
      };
      return (
        <>
          <Modal
            v-model={[visible.value, 'visible']}
            title="祈祷意向"
            onOk={() => (isEdit.value = true)}
            v-slots={slots}
          >
            {getIntent()}
            {getContent()}
          </Modal>
        </>
      );
    }

    function getContent() {
      return unref(isForm) ? (
        getForm()
      ) : (
        <>
          <div>{unref(intentionRef)}</div>
        </>
      );
    }

    function getForm() {
      return (
        <>
          <Input.TextArea v-model={[intentionRef.value, 'value']} />
        </>
      );
    }
    return () => (
      <>
        <span class="tips">
          （ {getMyintent()}）{getModal()}
        </span>
      </>
    );
  },
});
